<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位小技巧2</title>
    <style>
        .mask {
            background-color: rgba(0, 0, 0, 0.3); /*带透明度的颜色*/
            /*使用固定定位,紧贴参照物html的4个边,就可以与整个页面窗口一样大*/
            position: fixed;
            top:0;
            bottom:0;
            left:0;
            right: 0;
        }
        .mask:hover {
            /*让元素在文档流中消失*/
            display: none;
        }
    </style>
</head>
<body>
<!-- 遮罩层 -->
<div class="mask"></div>

<!-- 网页内容 lorem*60 -->
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium aperiam, eos eveniet fugiat
        illo, iste modi molestias necessitatibus neque obcaecati perspiciatis qui quod ratione repellat reprehenderit
        sequi ullam, vel.
    </div>
    <div>Deleniti doloribus libero maiores nam obcaecati odit perferendis quas, sunt vel! Aperiam fuga, natus officiis
        sequi velit voluptas. Animi fugiat harum ipsa perferendis provident unde voluptate! Ad aperiam fugit sed!
    </div>
    <div>Aliquid commodi, delectus deserunt dignissimos dolor dolorem doloribus facilis id itaque labore laboriosam
        minima non nostrum numquam odio porro quia recusandae sit, vero vitae? Alias aspernatur eaque eius quae quaerat.
    </div>
    <div>Accusamus accusantium aliquam, amet at autem consequuntur cum cumque deserunt dolore dolorum fuga ipsa magnam
        mollitia placeat praesentium reprehenderit repudiandae tempora totam ullam ut veniam vitae, voluptate. Cumque,
        eligendi inventore!
    </div>
    <div>Amet aspernatur autem beatae cum distinctio dolorem ducimus facere hic maiores minus nam natus nesciunt nihil
        nobis odio odit omnis pariatur perferendis, perspiciatis quaerat quasi quis, ratione sunt voluptate voluptatum.
    </div>
    <div>A accusantium aliquam aperiam aspernatur aut corporis dolores eveniet, ex exercitationem facere harum in ipsa
        ipsum magni natus porro quasi, quos ratione recusandae rem saepe sequi temporibus ullam vero voluptates.
    </div>
    <div>Aliquid amet consequatur eaque eius hic id itaque minus modi nobis obcaecati recusandae soluta vitae,
        voluptates! Accusamus, deleniti distinctio dolor facilis harum illo, maiores, minus qui saepe veritatis vero
        vitae.
    </div>
    <div>Debitis deserunt, ipsam molestiae perspiciatis possimus saepe tenetur? Adipisci atque, aut dolores incidunt
        iste laboriosam maxime minus necessitatibus nostrum, odio porro sed sequi sint suscipit tempore ut voluptatum?
        Ex, voluptas!
    </div>
    <div>A architecto consequuntur corporis, deleniti dolorem excepturi expedita laudantium molestias, necessitatibus,
        nisi qui sapiente veniam. Cum, cupiditate dolorem error esse facere incidunt, minus nesciunt quis, rem repellat
        saepe suscipit vitae!
    </div>
    <div>Deleniti doloremque dolorum ducimus enim explicabo, facere ipsum nulla numquam odit placeat, quidem quisquam
        quos sed. Aliquam architecto blanditiis, consectetur facilis iste nam quibusdam, ratione sequi sit sunt tenetur
        veniam.
    </div>
    <div>Amet obcaecati quia quos? Alias cupiditate debitis eius facilis minus, nesciunt nulla odit pariatur provident
        quaerat quia, temporibus voluptatem. Aliquid consectetur dignissimos dolores et inventore laborum, magnam
        molestias nesciunt sequi.
    </div>
    <div>Ex, maiores placeat. A, ab aliquid animi asperiores beatae commodi consequuntur et ex facere fuga, id molestiae
        nam placeat provident quas quisquam reprehenderit, soluta suscipit tempore unde ut vero vitae!
    </div>
    <div>Ad aperiam atque deserunt dignissimos earum eius enim, eos esse est eum excepturi, facilis ipsam magni nulla
        odio officia optio perferendis quibusdam quos rem repudiandae rerum sed veniam, vero voluptatem!
    </div>
    <div>A accusantium consequuntur cumque distinctio dolores exercitationem explicabo facere inventore ipsa itaque iure
        minima minus mollitia odio officiis optio provident qui repellat sequi sit sunt totam, ut vel veniam voluptates?
    </div>
    <div>Ab deleniti illum impedit nulla praesentium ratione vel. Aut culpa doloribus esse illum nesciunt nobis
        obcaecati odit, perferendis, perspiciatis porro sapiente, sit ullam vitae! At dolor ipsa ipsum odit vero!
    </div>
    <div>Commodi, cumque dolore ducimus fugiat hic modi nostrum qui. Debitis dolor eaque eius iste minima neque numquam,
        odio optio quas qui quis quisquam recusandae reiciendis sunt temporibus, tenetur vitae voluptates!
    </div>
    <div>Delectus expedita, facilis minima molestias repellendus temporibus unde velit vitae voluptatibus? Consectetur
        cupiditate dolore dolorem doloribus earum incidunt maxime pariatur praesentium provident quisquam quos, ratione
        recusandae rem repellendus sit tempore.
    </div>
    <div>Architecto, atque dolor inventore porro rem sequi voluptate? Accusamus animi atque beatae dolore eveniet facere
        harum id illo incidunt iste itaque magni, modi mollitia neque pariatur perferendis placeat sed ullam?
    </div>
    <div>Aspernatur consequuntur fugit incidunt maiores odit quis soluta vitae? Neque, numquam repudiandae? Aut autem
        consequatur ea harum ipsum iste modi nesciunt quo, rem reprehenderit saepe, sequi sit, sunt totam velit!
    </div>
    <div>Dolorem maiores necessitatibus odio, quaerat quia repellendus. At consequuntur dignissimos dolorem, ducimus
        eaque enim eveniet ex exercitationem facilis, laudantium minus, modi molestiae necessitatibus quae quam quod
        repellendus similique totam velit!
    </div>
    <div>Delectus excepturi itaque iusto magnam minima nemo nobis odit, quibusdam, repudiandae sapiente sunt suscipit
        temporibus veniam vitae voluptas. Aut debitis ex excepturi explicabo facere maxime neque nihil officia,
        similique vel.
    </div>
    <div>Ducimus id illo nostrum officiis placeat reiciendis rerum. Accusantium culpa cum dicta dolor earum esse facere,
        facilis fugit id labore magnam molestias nesciunt, odit officia praesentium quas quibusdam sint, tempore.
    </div>
    <div>Ad blanditiis fugit molestias non! Aliquam, amet, atque blanditiis eaque eligendi eveniet in ipsum laborum
        nesciunt qui quibusdam, quos repudiandae voluptatem. Adipisci, eius eum illo incidunt laudantium maiores
        quisquam voluptas.
    </div>
    <div>Accusamus ea est, et eveniet exercitationem illum odit omnis perspiciatis porro quasi, quod sit. Ab ad atque
        corporis distinctio eius nobis quae repellat sint veniam vitae? Atque deleniti veniam veritatis!
    </div>
    <div>Accusamus, architecto aspernatur at autem delectus dignissimos ex, expedita facere fugit illo maiores nihil,
        perferendis quaerat quasi quibusdam quis quod ratione reprehenderit rerum sequi similique totam unde voluptatum!
        Consectetur, ullam!
    </div>
    <div>Consequatur delectus deleniti deserunt, dignissimos eaque fugiat hic magni maxime, mollitia nam nesciunt
        obcaecati quia quos sunt, voluptatibus? Accusantium corporis debitis et exercitationem nesciunt non possimus
        quod reprehenderit veritatis? Obcaecati.
    </div>
    <div>Ad aspernatur corporis doloremque doloribus enim error et explicabo fuga fugiat in inventore iste labore,
        minima quis quod reiciendis saepe similique, soluta, tempora tenetur? Blanditiis minima quis tempore vitae
        voluptate!
    </div>
    <div>Alias aliquid amet animi aspernatur, beatae culpa debitis dignissimos dolorem dolores eos expedita fuga fugiat
        impedit in inventore ipsam itaque laudantium magni minus nostrum quae quibusdam ratione totam vitae voluptatum.
    </div>
    <div>Ab amet asperiores consectetur consequatur dolores enim error ex fugiat minima mollitia natus, necessitatibus
        non numquam officia optio quis, quo quos repellendus saepe sapiente sed sit soluta tenetur veritatis voluptatem.
    </div>
    <div>Cumque dolorem eius necessitatibus omnis quae? Ad culpa dolores expedita fuga fugiat inventore libero quam quo
        quos vero. Delectus eaque magnam magni natus optio provident quas, ratione recusandae sunt veritatis?
    </div>
    <div>Autem culpa delectus dolorum, eaque eius explicabo facere harum iste iure minus numquam odio pariatur quia
        sapiente suscipit tenetur unde. Commodi, fugiat illo ipsa porro possimus reprehenderit repudiandae soluta! Eum!
    </div>
    <div>Animi beatae consequatur cumque ducimus eaque eveniet incidunt libero, nulla quibusdam veniam. Accusamus,
        consequatur explicabo! Accusantium, neque, voluptatum! Dolore ducimus explicabo hic libero quia repellat
        sapiente temporibus tenetur velit voluptate.
    </div>
    <div>Ad eos est labore natus nisi, praesentium quisquam ratione rerum vel voluptatibus. Dignissimos minus numquam
        ullam. Aut consequuntur dolorum ea eaque esse eveniet incidunt, laboriosam nam neque numquam rerum voluptatem.
    </div>
    <div>Architecto, aut consequatur cumque doloremque enim eveniet facilis harum maxime, molestiae nesciunt nisi non
        porro praesentium qui suscipit totam voluptate. Adipisci culpa dolorem harum labore nostrum odit pariatur quas
        tenetur.
    </div>
    <div>Aspernatur, ea, odio! Animi cumque error illo, iusto libero rerum tempore ullam. Accusantium dolorem doloribus
        ducimus esse explicabo labore natus nihil nobis, placeat possimus provident soluta tempore unde voluptas
        voluptatum!
    </div>
    <div>Ab, ad amet architecto blanditiis distinctio eos et, harum itaque nesciunt nobis officiis quasi quis similique,
        voluptas voluptatibus. Ducimus, est, numquam? Delectus ipsam labore placeat, quaerat quisquam ratione soluta
        veniam!
    </div>
    <div>Blanditiis cumque delectus deleniti dicta distinctio doloremque eligendi ex expedita fugit harum natus nihil
        odit, placeat, repellendus sunt veritatis voluptate? Aspernatur deleniti id in magni perferendis, recusandae
        suscipit! Corporis, natus?
    </div>
    <div>Commodi dolorum ipsum itaque iusto porro rerum ut. A deleniti eaque eius, eos exercitationem explicabo, nulla
        odit omnis praesentium quibusdam, rerum soluta veritatis vitae! Ab distinctio ipsum nisi odio sed?
    </div>
    <div>Aliquid asperiores autem blanditiis, corporis ex excepturi exercitationem fugiat ipsa, ipsam laborum modi
        mollitia non odit placeat qui, rerum sapiente sint sit sunt voluptatem. Error ipsa labore quasi repellat
        voluptas?
    </div>
    <div>Ad aspernatur blanditiis consequatur corporis delectus dolore doloribus, eos maiores minus. Corporis ea eveniet
        provident quo reiciendis veritatis. Adipisci animi facilis laboriosam minima natus omnis quaerat quasi
        temporibus unde voluptate!
    </div>
    <div>A est exercitationem incidunt ipsa, magni praesentium quibusdam repellendus ut voluptate voluptates. Ad
        consequatur, culpa cumque deleniti earum et excepturi iste nisi, obcaecati optio pariatur perspiciatis quisquam
        ratione velit, veritatis?
    </div>
    <div>Aliquam explicabo laborum nisi numquam quaerat sequi. Aperiam delectus distinctio dolores doloribus ducimus eum
        exercitationem explicabo hic ipsa ipsam, iste labore magnam, molestiae nesciunt odit omnis ratione reiciendis
        sit velit.
    </div>
    <div>Aliquid animi corporis culpa cumque, dicta doloribus esse id illo iste magni, natus nulla pariatur placeat
        porro qui vitae voluptatibus. Accusantium, distinctio doloribus ea earum neque odio placeat voluptatum?
        Architecto!
    </div>
    <div>Atque eligendi hic molestias odit quae quas saepe veritatis? Consequuntur earum facilis laudantium pariatur
        praesentium ut! Corporis cumque debitis doloremque eos impedit minus molestias nisi, perspiciatis quasi rerum
        sit voluptatem.
    </div>
    <div>Assumenda consequatur, cupiditate expedita ipsa iste iusto laborum, magnam molestias mollitia necessitatibus
        obcaecati quasi ratione repellat saepe similique tempora temporibus? Adipisci dolorum et exercitationem harum in
        iusto natus pariatur vitae.
    </div>
    <div>Alias architecto commodi culpa dignissimos nihil nobis odio quia quos reiciendis saepe sint suscipit tempora
        veritatis, vero, voluptatem? Mollitia, velit veritatis? Aperiam libero officia quam temporibus. Aut distinctio
        reiciendis voluptatem!
    </div>
    <div>Architecto assumenda beatae cum incidunt iste laborum neque nesciunt officiis placeat sunt. Aliquam amet
        aperiam at culpa, cumque, explicabo fugit maiores maxime nostrum nulla optio perferendis praesentium provident
        quidem voluptate!
    </div>
    <div>Atque consequuntur cum eveniet, ex expedita facere illo laborum molestias odio officiis quas ratione tempora
        voluptatem! A aliquid, amet, aut error expedita harum impedit ipsum molestiae neque repellat rerum ullam.
    </div>
    <div>Expedita id, ut! Accusamus aspernatur, assumenda consectetur, debitis distinctio earum fugit illum impedit iure
        magnam nisi non numquam odio quas quibusdam quod quos repellat saepe similique soluta, totam ullam vero?
    </div>
    <div>Accusamus ad commodi debitis delectus distinctio dolor doloremque, dolores ea earum esse ex ipsa iusto maiores
        molestias neque nesciunt odit perspiciatis praesentium repellendus sapiente, similique, tempora temporibus
        tenetur voluptas voluptatem.
    </div>
    <div>Accusamus ad commodi consequuntur impedit iure natus nemo nostrum, possimus quaerat quasi repellendus ullam
        voluptates voluptatibus! A, aliquam amet animi aspernatur atque explicabo, iure numquam quae quam quos sequi
        veritatis.
    </div>
    <div>A accusamus ad aliquam amet consequuntur corporis enim facilis fugit impedit ipsa iste molestiae, obcaecati
        officiis placeat porro possimus, reiciendis reprehenderit sed sint, voluptate? At autem doloremque excepturi in
        modi.
    </div>
    <div>Assumenda aut dolores earum nam nesciunt similique totam veritatis. Accusamus architecto at debitis ea, eveniet
        facere facilis inventore iure labore molestiae nam natus nostrum, odit praesentium quasi recusandae, sequi
        tempore!
    </div>
    <div>Accusantium aliquam aliquid aspernatur cum, deserunt distinctio eligendi, excepturi exercitationem facere
        inventore ipsa laudantium maxime minima nesciunt nihil nulla numquam quis repellat repellendus similique soluta
        ut voluptas voluptates! Laudantium, tempora.
    </div>
    <div>Accusantium ad aperiam at distinctio dolorum eius, enim esse et eveniet fugit iste modi numquam porro qui, quod
        vel velit voluptates? Dicta iure maxime optio quaerat quas, repellendus voluptas. Voluptate.
    </div>
    <div>Ab accusantium, aperiam assumenda cupiditate doloribus est et, excepturi, harum illo ipsa mollitia nesciunt
        obcaecati odit omnis optio praesentium quo rerum sapiente sed similique velit veniam voluptatem? Fugiat, nostrum
        optio?
    </div>
    <div>At beatae blanditiis, ea earum inventore molestias, mollitia nam, natus necessitatibus numquam quidem
        repudiandae tempore vel velit voluptate. Accusantium amet assumenda, aut dolorem ex exercitationem fuga numquam
        ratione sunt vitae.
    </div>
    <div>Asperiores pariatur perspiciatis tempore! Accusantium blanditiis commodi ratione? Aspernatur, autem corporis
        dignissimos esse eum, eveniet excepturi exercitationem, iusto laboriosam molestias nesciunt nobis numquam
        praesentium quibusdam quidem rem rerum saepe sint.
    </div>
    <div>Eius est fugiat totam ut voluptatibus. A commodi, dicta expedita perspiciatis sequi velit? A, alias aspernatur
        autem blanditiis doloribus dolorum labore natus nobis praesentium totam? Adipisci alias atque impedit sed!
    </div>
    <div>Aliquid aperiam culpa cupiditate deleniti dolor dolore earum est explicabo laudantium nihil nulla perspiciatis
        qui, ratione rem rerum similique totam vero. Architecto delectus id iure laudantium quam quis quos repellendus!
    </div>
</div>
</body>
</html>